﻿@using FluentUI.Demo.Shared.Shared
@using FluentUI.Demo.Shared.Pages.MessageBar.Examples
@using Microsoft.AspNetCore.Components
@using System.Runtime.InteropServices
@namespace FluentUI.Demo.Shared

<PageTitle>@App.PageTitle("Demo")</PageTitle>

<div>
    <FluentLayout>
        <FluentHeader Class="siteheader">
            <a href="/" aria-label="Back to the homepage">
                <div class="logo" role="presentation" aria-hidden="true" itemprop="logo" itemscope="itemscope">
                    <svg xmlns="http://www.w3.org/2000/svg" width="108" height="23" viewBox="72 72 337 74" preserveAspectRatio="xMidYMin slice">
                        <g data-name="MS-symbol">
                            <clipPath>
                                <path transform="matrix(1 0 0 -1 0 216)" d="M0 216h482V0H0z"></path>
                            </clipPath>
                            <g clip-path="url(#a)">
                                <path d="M394.942 104.59h-10.858v25.003h-7.38V104.59h-5.182v-5.965h5.182v-4.308c0-3.254 1.06-5.92 3.178-7.998 2.12-2.079 4.835-3.118 8.15-3.118.882 0 1.666.045 2.35.135a9.37 9.37 0 011.806.407v6.296c-.24-.14-.663-.31-1.265-.512-.603-.2-1.296-.3-2.078-.3-1.528 0-2.702.476-3.526 1.43-.824.954-1.235 2.365-1.235 4.232v3.736h10.858v-6.959l7.321-2.229v9.188h7.381v5.965h-7.38v14.49c0 1.91.345 3.254 1.038 4.037.693.783 1.782 1.175 3.27 1.175.42 0 .927-.1 1.52-.3a7.178 7.178 0 001.552-.724v6.025c-.463.261-1.23.502-2.305.723a15.742 15.742 0 01-3.178.331c-3.073 0-5.378-.817-6.914-2.455-1.537-1.637-2.305-4.102-2.305-7.396zm-48.407 9.73c0 3.233.733 5.703 2.2 7.411 1.465 1.707 3.564 2.56 6.295 2.56 2.652 0 4.67-.853 6.055-2.56 1.386-1.708 2.08-4.238 2.08-7.592 0-3.334-.719-5.849-2.155-7.547-1.436-1.697-3.45-2.545-6.04-2.545-2.67 0-4.745.888-6.22 2.666-1.477 1.777-2.215 4.313-2.215 7.607m-7.592.24c0-5.12 1.446-9.177 4.338-12.17 2.892-2.993 6.91-4.489 12.05-4.489 4.841 0 8.621 1.441 11.343 4.323 2.721 2.883 4.082 6.774 4.082 11.674 0 5.021-1.447 9.018-4.338 11.99-2.892 2.973-6.829 4.458-11.81 4.458-4.8 0-8.61-1.41-11.432-4.232-2.822-2.82-4.233-6.673-4.233-11.554m-16.417-7.802c0 1.045.331 1.863.994 2.456.662.592 2.128 1.34 4.398 2.243 2.912 1.166 4.956 2.476 6.131 3.932 1.175 1.456 1.762 3.22 1.762 5.287 0 2.912-1.12 5.252-3.359 7.02-2.24 1.767-5.267 2.65-9.083 2.65-1.285 0-2.706-.155-4.263-.467-1.556-.31-2.877-.707-3.96-1.19v-7.169a17.945 17.945 0 004.277 2.198c1.526.543 2.911.814 4.157.814 1.647 0 2.862-.23 3.645-.693.784-.46 1.175-1.235 1.175-2.319 0-1.005-.406-1.853-1.22-2.546-.813-.693-2.355-1.492-4.624-2.395-2.69-1.125-4.599-2.39-5.724-3.796-1.125-1.406-1.687-3.193-1.687-5.362 0-2.792 1.11-5.086 3.33-6.884 2.217-1.797 5.095-2.696 8.63-2.696 1.084 0 2.3.12 3.645.361 1.346.242 2.47.553 3.374.934v6.93c-.964-.644-2.089-1.195-3.374-1.658-1.286-.462-2.56-.693-3.826-.693-1.386 0-2.465.271-3.238.813-.774.543-1.16 1.286-1.16 2.23m-35.066 7.562c0 3.233.733 5.703 2.2 7.411 1.465 1.707 3.564 2.56 6.295 2.56 2.652 0 4.67-.853 6.055-2.56 1.386-1.708 2.08-4.238 2.08-7.592 0-3.334-.719-5.849-2.155-7.547-1.436-1.697-3.449-2.545-6.039-2.545-2.672 0-4.745.888-6.222 2.666-1.476 1.777-2.214 4.313-2.214 7.607m-7.592.24c0-5.12 1.446-9.177 4.338-12.17 2.893-2.993 6.91-4.489 12.051-4.489 4.84 0 8.621 1.441 11.342 4.323 2.721 2.883 4.082 6.774 4.082 11.674 0 5.021-1.446 9.018-4.338 11.99-2.892 2.973-6.828 4.458-11.809 4.458-4.8 0-8.61-1.41-11.433-4.232-2.822-2.82-4.233-6.673-4.233-11.554m-3.136-16.448c.582 0 1.105.041 1.567.121.462.08.853.18 1.175.301v7.38c-.382-.28-.939-.546-1.672-.798-.733-.25-1.622-.376-2.666-.376-1.788 0-3.299.753-4.534 2.26-1.235 1.505-1.853 3.825-1.853 6.958v15.635h-7.29V98.624h7.29v4.88h.12c.663-1.687 1.667-3.007 3.013-3.96 1.346-.954 2.962-1.432 4.85-1.432m-27.956 26.18c1.084 0 2.28-.25 3.585-.754a15.06 15.06 0 003.615-1.988v6.778c-1.165.663-2.485 1.165-3.962 1.506-1.475.342-3.098.512-4.865.512-4.559 0-8.265-1.44-11.116-4.323-2.852-2.88-4.278-6.562-4.278-11.04 0-4.98 1.456-9.083 4.37-12.307 2.91-3.224 7.037-4.835 12.38-4.835 1.366 0 2.746.176 4.143.527 1.395.352 2.504.758 3.328 1.22v6.99c-1.125-.824-2.274-1.462-3.45-1.914a9.966 9.966 0 00-3.599-.678c-2.872 0-5.192.934-6.959 2.802-1.768 1.868-2.652 4.388-2.652 7.562 0 3.132.85 5.573 2.546 7.32 1.697 1.748 4.002 2.621 6.914 2.621m-22.112 5.302h-7.29V98.624h7.29zm-8.044-39.916c0-1.205.437-2.214 1.311-3.028.874-.813 1.913-1.22 3.118-1.22 1.285 0 2.35.417 3.193 1.25.844.834 1.266 1.833 1.266 2.998 0 1.185-.432 2.18-1.296 2.982-.864.804-1.918 1.205-3.163 1.205-1.246 0-2.295-.406-3.148-1.219-.854-.815-1.28-1.803-1.28-2.968m-6.274-3.284v43.2h-7.5v-33.86h-.12l-13.408 33.86h-4.97l-13.738-33.86h-.09v33.86h-6.929v-43.2h10.755l12.412 32.024h.18l13.105-32.024z" fill="var(--neutral-foreground-rest)"></path>
                                <path d="M106.214 106.214H71.996V71.996h34.218z" fill="#f25022"></path>
                                <path d="M143.993 106.214h-34.218V71.996h34.218z" fill="#7fba00"></path>
                                <path d="M106.214 143.993H71.996v-34.218h34.218z" fill="#00a4ef"></path>
                                <path d="M143.993 143.993h-34.218v-34.218h34.218z" fill="#ffb900"></path>
                            </g>
                        </g>
                    </svg>
                </div>
            </a>
            <FluentSpacer />

            <div class="search">
                <DemoSearch />
            </div>

            <div class="links">
                <FluentAnchor Appearance="Appearance.Hypertext"
                              Href="http://github.com/microsoft/fluentui-blazor" Target="_blank" Rel="noreferrer noopener"
                              title="FluentUI Blazor source on GitHub" aria-label="FluentUI Blazor Repo">
                    <FluentIcon Value="@(new DemoIcons.Size20.GitHub())" Color="Color.FillInverse" />
                </FluentAnchor>
            </div>
            <div class="notifications">
                <NotificationCenter />
            </div>
            <div class="settings">
                <SiteSettings />
            </div>

            
        </FluentHeader>

        <FluentStack Class="body-stack" Orientation="Orientation.Horizontal" Width="100%" HorizontalGap="0">
            <DemoNavMenu />
            <FluentBodyContent id="body-content" Style="height: calc(100dvh - 90px);">
                <div class="content">
                    <article id="article">

                        <FluentMessageBarProvider Section="@App.MESSAGES_TOP" />


                                <CascadingValue Value=@OnRefreshTableOfContents>
                                    @Body
                                </CascadingValue>

                    </article>
                    <aside>
                        <TableOfContents @ref=_toc />
                        <ConsoleLog />
                    </aside>

                    <FluentToastProvider MaxToastCount="10" />
                    <FluentDialogProvider />
                    <FluentTooltipProvider />
                    <FluentKeyCodeProvider />

                </div>
            </FluentBodyContent>
        </FluentStack>

        <FluentFooter Style="@("height: 40px; color: white;  font-size: var(--type-ramp-minus-1-font-size); line-height: var(--type-ramp-base-line-height);")">
            <div class="version">
                Version: @_version
                &nbsp;-&nbsp;
                <a href="https://dotnet.microsoft.com/en-us/learn/aspnet/what-is-aspnet-core">Powered by @RuntimeInformation.FrameworkDescription</a>
            </div>
            <FluentSpacer />
            <div class="copy">
                Microsoft © 2024. All rights reserved.
            </div>
        </FluentFooter>
    </FluentLayout>
</div>
